import React, { Component } from 'react'
import { Icon, Item } from 'components'
import './MyBalance.less'
import { formatPriceStr } from '../../methods'
import { post } from '../../../../utils'

export default class MyBalance extends Component<any, any> {

    public componentDidMount () {
        this.getData()
    }

    public render (): JSX.Element {
        const { all, balance, frozen_balance } = this.props.userInfo
        return (
            <div className="myBalance">
                <div className="myBalance_top">
                    <div className="myBalance_top_Bg"><img src={require('../../../../assets/myBalance_topBg.png')} /></div>
                    <div className="myBalance_top_content">
                        <div className="myBalance_top_Navtitle">
                            <div><Icon type="arrow_left" onClick={() => {this.props.history.goBack()}} /></div>
                            <div>我的钱包</div>
                        </div>
                        <div className="myBalance_top_content_title">我的余额(元)</div>
                        <div className="myBalance_top_content_text DINPro">{balance && formatPriceStr(balance.toString())}</div>
                        <div className="myBalance_top_content_InfoWrap">
                            <div>
                                <div className="DINPro">{frozen_balance && formatPriceStr(frozen_balance.toString())}</div>
                                <div>冻结余额(元)</div>
                            </div>
                            <div>
                                <div className="DINPro">{all && formatPriceStr(all.toString())}</div>
                                <div>总额(元)</div>
                            </div>
                        </div>
                    </div>
                </div> 
                <Item 
                    onPress={() => {this.goToUrl('/My/recharge')}}
                    className="myBalance_operation_item" 
                    title={<div className="myBalance_operation_item_title"><Icon type="recharge" /> <span>充值</span></div>} 
                    value={<Icon className="myBalance_operation_item_value" type="arrow_right" />} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/putforward')}}
                    className="myBalance_operation_item" 
                    title={<div className="myBalance_operation_item_title"><Icon type="wallet" style={{color: '#0094f2'}} /> <span>提现</span></div>} 
                    value={<Icon className="myBalance_operation_item_value" type="arrow_right" />} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/mybill')}}
                    className="myBalance_operation_item" 
                    title={<div className="myBalance_operation_item_title"><Icon type="order" className="myBalance_operation_item_title_icon"/> <span style={{paddingLeft: '0'}}>余额明细</span></div>} 
                    value={<Icon className="myBalance_operation_item_value" type="arrow_right" />} 
                />
            </div>
        )
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
    private getData = () => {
        const { userInfo, SET_USER_INFO } = this.props
        post('usersapi/userWallet', {
            userId: userInfo.id
        }).then((data: any) => {
            SET_USER_INFO({
                ...userInfo,
                ...data
            })
        })
    }
}